<template>
    <div class="main">
        <div class="left">
            <mapgis-web-map
                crs="EPSG:3857"
                :center="[125.3,43.85]"
                :zoom="10"
            >
            <!-- :mapStyle='{"version":8,"sources":{},"layers":[{"id":"背景","type":"background","paint":{"background-color":"rgba(0, 0, 0, 0.5)"}}]}' -->
        
                    <!-- 基础底图 -->
                    <mapgis-rastertile-layer
                        layerId="tdt"
                        url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
                    />
                
                    <!-- 量测工具 -->
                    <div class="measure-story-control">
                        <mapgis-measure enableControl isAdvanceControl></mapgis-measure>
                    </div>
                
                    
                    <!-- 地图状态栏 -->
                    <!-- <div class="my-map-state">                        
                        <mapgis-state :default="false">
                            <template v-slot:default="{state}">
                            <mapgis-ui-input-group size="default" class="mapgis-test-2d-statebar">
                                <mapgis-ui-input addon-before="级别" :value="state.level"/>
                                <mapgis-ui-input addon-before="比例尺" :value="state.scale"/>
                                <mapgis-ui-input addon-before="经度" :value="state.lng" />
                                <mapgis-ui-input addon-before="纬度" :value="state.lat"/>
                            </mapgis-ui-input-group>
                            </template>
                        </mapgis-state>
                    </div>             -->
        
            </mapgis-web-map>
        </div>
        <div class="right">
            <div class="tab-box">
                <div class="tab-change" @click="currentTab='数据管理'" :class="{'tab-change-active':currentTab=='数据管理'}">数据管理</div>
                <div class="tab-change" @click="currentTab='核查审核'" :class="{'tab-change-active':currentTab=='核查审核'}">核查审核</div>
                <div class="tab-change" @click="currentTab='整改审核'" :class="{'tab-change-active':currentTab=='整改审核'}">整改审核</div>
                <div class="tab-change" @click="currentTab='考核排名'" :class="{'tab-change-active':currentTab=='考核排名'}">考核排名</div>
                <div class="tab-change" @click="currentTab='监测报告'" :class="{'tab-change-active':currentTab=='监测报告'}">监测报告</div>
          </div>
          <table1 class="right-box" v-if="currentTab=='数据管理'"></table1>
        </div>
    </div>

    
</template>
  
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import newaxios from 'axios'
//import MainMap from '@/components/Maps/MainMap'
//import { bus } from '@/bus.js' //引入bus.js定义的空的Vue实例
import store from '@/store/'
//import { postAction,getAction } from '@/api/manage'
import table1 from './g1/table2.vue'

export default {
   name:"map4",
   components: {
        table1,
   },
   data() {
        return {
            currentTab:"数据管理",
            recordIdReq:"",
        }
   },
   methods: {
        //customRow(record){},
   }, 
   mounted() {
        //this.getList()        
   },
   watch:{      
   }

}    


</script>
  
<style scoped>
.main{
    width:100%;
    height:calc(100vh - 59px);
    background-color: antiquewhite;
}
.left{
    width:60%;
    height:100%;
    display:inline-block;
    background:#ddd;
}
.right{
    width:40%;
    height:calc(100vh - 59px);
    padding-left:10px;
    display:inline-block;
    vertical-align: top;
    overflow: auto;
    background-color: aqua;
}
.tab-box{
    width: calc(100% - 20px);
    height: 47px;
    margin: 0px auto ;
    line-height: 47px; 
    background-color: blueviolet;   
}
.tab-box div{
    display: inline-block;
}

.tab-change{
      width: 140px;
      height: 100%;
      display: inline-block;
      font-size: 18px;
      text-align: center;
      font-family: PingFangSC-regular;
      border-bottom: rgba(226,226,226,0.54) solid 2px;
      cursor: pointer;
}
.tab-change-active{
    color: rgba(0,145,250,1);
    border-color: rgba(0,145,250,1);
}
.right-box{
    height:calc(100vh - 120px);
    overflow-x: hidden;
    overflow-y: auto;
}



.measure-story-control {
    position: absolute;
    top: 30px;
    right: 30px;

    z-index: 9;
    background: aliceblue;
    border-radius: 10px;
}

.my-map-state {
    position: fixed;
    bottom: 10px;
    /* right: 10px; */
    /* margin: auto 0; */
    /* right: 10px; */
    z-index: 9;
    background: aliceblue;
    /* border-radius: 10px; */
    /* height: 120px; */
    width: 99%;  
}
  
</style>
  